﻿<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!--Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700' rel='stylesheet' type='text/css'>

    <!--owl-carousel css-->
    <link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="css/owl-carousel/owl.theme.css">
    <link rel="stylesheet" href="css/owl-carousel/owl.transitions.css">
    <!--        <link rel="stylesheet"  href="css/animations.css">-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/color1.css">

    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    <style>
        .backTop {
            position: fixed;
            right: 30px;
            bottom: 50px;
            width: 100px;
            height: 100px;
            display: none;
        }
        
        .backTop img {
            width: 100px;
        }
    </style>
</head>

<body id="page-top" class="index">

    <!-- Preloader -->
    <div class="preloader"></div>

    <!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

    <!-- Header -->
    <header id="home">
        <!-- Navigation -->
        <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
				</button>
                    <a style="display: none" class="navbar-brand page-scroll" href="#page-top"><img src="images/logos/logo.png" alt=""></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav text-center">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="aboutus.html">About us</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li class="logo-holder">
                            <a href="index.html"><img src="images/logos/logo.png" alt=""></a>
                        </li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="layer1">
            <div class="container">
                <div id="main-banner" class="main-banner">
                    <div class="intro-text">
                        <div class="intro-heading">
                            <h1><span>Welcome to</span>Level Agency<span>Creative Design</span></h1>
                        </div>
                        <a href="#contact" class="page-scroll btn btn-primary">Contact us <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
                    </div>
                    <div class="intro-text">
                        <div class="intro-heading">
                            <h1><span>Welcome to</span>Level Agency<span>Creative Design</span></h1>
                        </div>
                        <a href="#contact" class="page-scroll btn btn-primary">Contact us <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
                    </div>
                    <div class="intro-text">
                        <div class="intro-heading">
                            <h1><span>Welcome to</span>Level Agency<span>Creative Design</span></h1>
                        </div>
                        <a href="#contact" class="page-scroll btn btn-primary">Contact us <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
            <div class="banner-layer layer2"></div>
            <div class="banner-layer layer3"></div>
        </div>

    </header>

    <!-- Services Section -->
    <section id="services">
        <div class="container animatedParent">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">our Services</h2>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-4 animated bounceInLeft slower">
                    <div class="circle"><img src="images/brand.png" alt="" /></div>
                    <h4 class="service-heading">Brand Design</h4>
                    <p class="text-muted">Nunc suscipit eleifend enim, ut accumsan justo pellentesque eu. Nunc auctor dapibus vulputate. Vestibulum vehicula leo id tortor fermentum iaculis.</p>
                </div>
                <div class="col-md-4 animated bounceInDown slower">
                    <div class="circle"><img src="images/webDesign.png" alt="" /></div>
                    <h4 class="service-heading">Web Design</h4>
                    <p class="text-muted">Nunc suscipit eleifend enim, ut accumsan justo pellentesque eu. Nunc auctor dapibus vulputate. Vestibulum vehicula leo id tortor fermentum iaculis.</p>
                </div>
                <div class="col-md-4 animated bounceInRight slower">
                    <div class="circle"><img src="images/marketing.png" alt="" /></div>
                    <h4 class="service-heading">Marketing</h4>
                    <p class="text-muted">Nunc suscipit eleifend enim, ut accumsan justo pellentesque eu. Nunc auctor dapibus vulputate. Vestibulum vehicula leo id tortor fermentum iaculis.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Grid Section -->
    <section id="portfolio">
        <div class="container-fluid animatedParent">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Recent Work</h2>
            </div>
            <div class="col-md-12 text-center">
                <ul class="cat-list">
                    <li><button class="filter" data-filter="all">All</button></li>
                    <li><button class="filter" data-filter=".category-1">brading</button></li>
                    <li> <button class="filter" data-filter=".category-2">Print media</button></li>
                    <li> <button class="filter" data-filter=".category-3">Web Design</button></li>
                    <li> <button class="filter" data-filter=".category-4">Photography</button></li>
                </ul>
            </div>
            <div class="animated bounceInUp slowest">
                <div id="container">
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-1" data-value="4">
                        <a href="" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/dreams.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-2" data-value="8">
                        <a href="" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/dreams-preview.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-1" data-value="3">
                        <a href="" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/golden.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-2 category-1" data-value="1">
                        <a href="" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/roundicons.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-2 category-1 category-3" data-value="6">
                        <a href="" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/roundicons-free.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-3 category-2 category-4" data-value="7">
                        <a href="" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/escape.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-3 category-4 category-2" data-value="2">
                        <a href="#" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/startup-framework.png" class="img-responsive" alt="">
                        </a>

                    </div>
                    <div class="col-md-3 col-sm-6 portfolio-item mix category-4 category-3" data-value="3">
                        <a href="#" class="portfolio-link">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <p>Photography</p>
                                    <h4>Level Agency</h4>
                                </div>
                            </div>
                            <img src="images/portfolio/treehouse.png" class="img-responsive" alt="">
                        </a>

                    </div>

                </div>

            </div>
            <div class="button-area">
                <a href="" class="btn btn-bottom btn-primary">Load More</a>
            </div>
        </div>
    </section>

    <section id="facts" class="fun-facts bg-light-gray bg-light-gray-back">
        <div class="container animatedParent">
            <div class="row">
                <div class="col-lg-12 text-center col-sm-12">
                    <h2 class="section-heading">Fun facts</h2>
                </div>
            </div>
            <div class="row animated fadeInUp slower">

                <div class="col-md-3">

                    <div class="fact-box hide-bar">

                        <i class="icon-awards"></i>
                        <h4>Awwards </h4>
                        <P>56</P>
                    </div>

                </div>

                <div class="col-md-3">

                    <div class="fact-box">

                        <i class="icon-customers"></i>
                        <h4>Happy Customers </h4>
                        <P>32</P>
                    </div>

                </div>

                <div class="col-md-3">

                    <div class="fact-box">

                        <i class="icon-codes"></i>
                        <h4>Line of Codes </h4>
                        <P>66</P>
                    </div>

                </div>

                <div class="col-md-3">

                    <div class="fact-box">

                        <i class="icon-cup"></i>
                        <h4>Cup of cofee </h4>
                        <P>97</P>
                    </div>

                </div>

            </div>

        </div>

    </section>
    <section class="why-holder">
        <div class="why-choose-us ">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h2 class="section-heading">Why Choose Us</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid  bg-light-gray">
            <div class="row">
                <div class="col-md-6 picture-border">
                    <div class="row">
                        <img src="images/img1.png" alt="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="why-right">
                        <h4 class="section-sub-heading">
                            About Us
                        </h4>
                        <div class="content-area">
                            <p class="sub-text">To take a trivial example, which of us ever undertakes laborious physical exercise.</p>
                            <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth,
                                the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
                                painful.
                            </p>
                            <p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section id="team" class="our-team">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Our Team</h2>
                </div>
            </div>
            <div class="row">
                <div id="owl-demo" class="owl-carousel">
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Kay Garland</h4>
                                    <p class="text-muted">Lead Designer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/1.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Kay Garland</h4>
                                    <p class="text-muted">Lead Designer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/2.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Kay Garland</h4>
                                    <p class="text-muted">Lead Designer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/3.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Kay Garland</h4>
                                    <p class="text-muted">Lead Designer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/1.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Kay Garland</h4>
                                    <p class="text-muted">Lead Designer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/2.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Kay Garland</h4>
                                    <p class="text-muted">Lead Designer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/3.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="team-member item">
                            <div class="team-hover">
                                <div class="team-hover-content">
                                    <h4>Diana Pertersen</h4>
                                    <p class="text-muted">Lead Developer</p>
                                    <ul class="list-inline social-buttons">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <img src="images/team/3.jpg" class="img-responsive lazyOwl" alt="">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonials text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 ">
                    <h2 class="section-heading">What they says</h2>
                </div>
            </div>
            <div id="owl-demo-3">
                <div class="testmonials-list">
                    <div class="img-holder">
                        <img src="images/avatar.png" class="img-circle" alt="">
                    </div>
                    <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra velit non dolor congue mollis. Sed efficitur diam eget eleifend venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</em></p>
                    <div class="testi-info">
                        <p>JAKE SMITH
                            <span>Web designer</span>
                        </p>
                    </div>
                    <i class="line-icon"></i>
                </div>
                <div class="testmonials-list">
                    <div class="img-holder">
                        <img src="images/avatar.png" class="img-circle" alt="">
                    </div>
                    <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra velit non dolor congue mollis. Sed efficitur diam eget eleifend venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</em></p>
                    <div class="testi-info">
                        <p>JAKE SMITH
                            <span>Web designer</span>
                        </p>
                    </div>
                    <i class="line-icon"></i>
                </div>
                <div class="testmonials-list">
                    <div class="img-holder">
                        <img src="images/avatar.png" class="img-circle" alt="">
                    </div>
                    <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra velit non dolor congue mollis. Sed efficitur diam eget eleifend venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</em></p>
                    <div class="testi-info">
                        <p>JAKE SMITH
                            <span>Web designer</span>
                        </p>
                    </div>
                    <i class="line-icon"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- Clients Aside -->
    <section class="clients">
        <div class="container">
            <div class="owl-carousel border-box" id="owl-demo-2">
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-2.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-3.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-4.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-5.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-2.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-3.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-4.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="client-logo">
                    <a href="#">
                        <img src="images/client-logo-5.png" class="img-responsive img-centered" alt="">
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="price-plan text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="section-heading">Pricing Plan</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="pricing-box">
                        <div class="circle"><img src="images/icon-beginner.png" alt="" />
                        </div>
                        <div class="pricing-box-holder">
                            <div class="pricing-box-header">
                                <h4>Beginner</h4>
                                <p><small>Start at</small></p>
                                <h3>$9.95/ <small> mo </small></h3>
                            </div>
                            <ul class="pricing-box-body">
                                <li>500MB Disk Space</li>
                                <li>5GB Data Transfer</li>
                                <li>Control Panel</li>
                                <li>Unlimited E-mail</li>
                                <li>Sub Domains</li>
                                <li>FTP</li>
                                <li>MySql</li>
                            </ul>
                            <div class="pricing-btn">
                                <button class="btn btn-primary">purchase now</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="pricing-box">
                        <div class="circle"><img src="images/icon-pro.png" alt="" />
                        </div>
                        <div class="pricing-box-holder">
                            <div class="pricing-box-header">
                                <h4>Professional</h4>
                                <p><small>Start at</small></p>
                                <h3>$25.95/ <small> mo </small></h3>
                            </div>
                            <ul class="pricing-box-body">
                                <li>2000MB Disk Space</li>
                                <li>10GB Data Transfer</li>
                                <li>Control Panel</li>
                                <li>Unlimited E-mail</li>
                                <li>Sub Domains</li>
                                <li>FTP</li>
                                <li>MySql</li>
                            </ul>
                            <div class="pricing-btn">
                                <button class="btn btn-primary">purchase now</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="pricing-box">
                        <div class="circle"><img src="images/icon-pre.png" alt="" />
                        </div>
                        <div class="pricing-box-holder">
                            <div class="pricing-box-header">
                                <h4>premium</h4>
                                <p><small>Start at</small></p>
                                <h3>$50.95/ <small> mo </small></h3>
                            </div>

                            <ul class="pricing-box-body">
                                <li>5000MB Disk Space</li>
                                <li>50GB Data Transfer</li>
                                <li>Control Panel</li>
                                <li>Unlimited E-mail</li>
                                <li>Sub Domains</li>
                                <li>FTP</li>
                                <li>MySql</li>
                            </ul>
                            <div class="pricing-btn">
                                <button class="btn btn-primary">purchase now</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="blog text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="section-heading">our blogs</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="blog-box">
                        <div class="row">
                            <div class="col-xs-4 col-md-6 blog-img">
                                <img src="images/about/1.jpg" alt="">
                            </div>
                            <div class="col-xs-8 col-md-6 blog-content">
                                <h3>Creative Blog Post</h3>
                                <h4>Web Design</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida dignissim sollicitudin. Phasellus nec vulputate magna.</p>
                                <span>31/Dec/15</span>
                                <p><a href="">Read more <i class="fa fa-long-arrow-right"></i></a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="blog-box">
                        <div class="row">
                            <div class="col-xs-4 col-md-6 blog-img">
                                <img src="images/about/2.jpg" alt="">
                            </div>
                            <div class="col-xs-8 col-md-6 blog-content">
                                <h3>Creative Blog Post</h3>
                                <h4>Graphic Design</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida dignissim sollicitudin. Phasellus nec vulputate magna.</p>
                                <span>31/Dec/15</span>
                                <p><a href="">Read more <i class="fa fa-long-arrow-right"></i></a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->

    <section id="contact">
        <div class="contact-pre text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="section-heading">Contact Us</h2>
                    </div>
                </div>
            </div>
        </div>
        <div id="map"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 padding-top-bottom">
                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-holder">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                        <p class="help-block text-danger"></p>
                                    </div>
                                    <div class="form-group">
                                        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                                        <p class="help-block text-danger"></p>
                                    </div>
                                    <div class="form-group">
                                        <textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                        <p class="help-block text-danger"></p>
                                    </div>
                                    <div id="success"></div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="bottom-section text-center">

        <div class="container">

            <div class="row">

                <div class="col-md-4">

                    <div class="circle footer-images"><img src="images/email.png" alt=""></div>
                    <h4>EMAIL</h4>

                    <p>Info@levelagency.com</p>

                </div>

                <div class="col-md-4">

                    <div class="circle footer-images">
                        <img src="images/address.png" alt="">
                    </div>

                    <h4>ADDRESS</h4>

                    <p>Karl-Liebknecht-Strasse 2366 4905 Affing, Germany</p>

                </div>

                <div class="col-md-4">

                    <div class="circle footer-images"><img src="images/phone.png" alt=""></div>

                    <h4>Phone</h4>

                    <p>+1 (359)-484-586-97</p>

                </div>


            </div>

        </div>

    </section>

    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="list-inline social-buttons">
                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-vimeo"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-12">
                    <span class="copyright"> <em>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></em></span>
                </div>
            </div>
        </div>
    </footer>
    <!-- 回到顶部元素 -->
    <div class="backTop">
        <img src="images/rockets.png" alt="">
    </div>



    <!-- jQuery -->
    <script src="js/vendor/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/vendor/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/vendor/jquery.easing.min.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="js/vendor/jqBootstrapValidation.js"></script>
    <script src="js/vendor/contact_me.js"></script>
    <script src="js/vendor/owl.carousel.min.js"></script>
    <script src="js/vendor/prettify.js"></script>
    <script src="js/vendor/css3-animate-it.js"></script>

    <!-- Theme JavaScript -->
    <script src="js/vendor/agency.min.js"></script>
    <script src="js/vendor/jquery.mixitup.js"></script>
    <script src="js/vendor/wow.min.js"></script>
    <!---<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/vendor/gmaps.js"></script>--->

    <script src="js/main.js"></script>
    <script src="js/script.js"></script>
    <!---<script type="text/javascript">
	//++++++++++++++++++++++++++++++++
	//   Map Code
	//++++++++++++++++++++++++++++++++
	var map = new GMaps({
		div: '#map',
		lat: -12.043333,
		lng: -77.028333
	});
</script>--->
    <!-- //回到顶部js -->
    <script src="js/backToTop.js"></script>
</body>

</html>